<template>
  <div>
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="120px"
      :disabled="parentData.showInfo"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" autocomplete="off" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              autocomplete="new-password"
              placeholder="请输入密码，默认abcd1234"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="identificationNumber">
            <el-input v-model="form.identificationNumber" placeholder="请输入身份证号" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="从业资格证" prop="workLicense">
            <el-input v-model="form.workLicense" placeholder="请输入从业资格证" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="从业资格证到期" prop="workLicenseDueDate">
            <el-date-picker
              v-model="form.workLicenseDueDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所在区域" prop="areaList">
            <el-cascader
              v-model="form.areaList"
              :options="parentData.areaOptions"
              :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
              @change="changeAreaList"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作单位" prop="workCompany">
            <el-input v-model="form.workCompany" placeholder="请输入工作单位" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="准驾车型" prop="vehicleClass">
            <el-select v-model="form.vehicleClass" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleTypeAllowList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证号" prop="driverLicense">
            <el-input v-model="form.driverLicense" placeholder="请输入驾驶证号" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车主姓名" prop="owner">
            <el-input v-model="form.owner" placeholder="请输入车主姓名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证到期" prop="driverLicenseDueDate">
            <el-date-picker
              v-model="form.driverLicenseDueDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="licenseNumber">
            <el-input v-model="form.licenseNumber" placeholder="请输入车牌号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定位来源" prop="locationSource">
            <el-select v-model="form.locationSource" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.locationSourceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车型" prop="classificationCode">
            <el-select v-model="form.classificationCode" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleClassificationList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车长" prop="length">
            <el-select v-model="form.length" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleLengthList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车宽" prop="width">
            <el-select v-model="form.width" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleWidthList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车高" prop="height">
            <el-select v-model="form.height" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleHighList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆载重" prop="loadWeight">
            <el-select v-model="form.loadWeight" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车身自重" prop="selfRespect">
            <el-select v-model="form.selfRespect" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总重量" prop="totalWeight">
            <el-select v-model="form.totalWeight" placeholder="请选择" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="道路运输证号" prop="roadTransportCertificateNumber">
            <el-input
              v-model="form.roadTransportCertificateNumber"
              placeholder="请输入车辆道路运输证号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运输证到期日期" prop="roadTransportCertificateDate">
            <el-date-picker
              v-model="form.roadTransportCertificateDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆识别代号" prop="vin">
            <el-input v-model="form.vin" placeholder="请输入车辆识别代号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行驶证到期日期" prop="vehicleLicenseDueDate">
            <el-date-picker
              v-model="form.vehicleLicenseDueDate"
              type="date"
              placeholder="到期日期"
              value-format="yyyy-MM-dd"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="有无挂车" prop="isHasTrailer">
            <el-select v-model="form.isHasTrailer" placeholder="请选择" clearable>
              <el-option
                v-for="item in isHasTrailerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="computedIsHasTrailer">
          <el-form-item label="挂车牌照" prop="trailerNum">
            <el-input v-model="form.trailerNum" placeholder="挂车牌照" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 图片上传 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传证件" required>
            <!-- 挂车行驶证照片 -->
            <div class="custom-grid" v-if="computedIsHasTrailer">
              <el-form-item prop="trailerVehicleLicenseImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'trailerVehicleLicense') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.trailerVehicleLicenseImg"
                    :src="form.trailerVehicleLicenseImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">挂车行驶证照片</div>
            </div>
            <!-- 挂车道路运输证照片 -->
            <div class="custom-grid" v-if="computedIsHasTrailer">
              <el-form-item prop="trailerRoadTransportCertificateImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'trailerRoadTransportCertificate') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.trailerRoadTransportCertificateImg"
                    :src="form.trailerRoadTransportCertificateImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">挂车道路运输证照片</div>
            </div>
            <!-- 挂车照片 -->
            <div class="custom-grid" v-if="computedIsHasTrailer">
              <el-form-item prop="trailerVehicleImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'trailerVehicle') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.trailerVehicleImg" :src="form.trailerVehicleImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">挂车照片</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="driverLicenseImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'driverLicense') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.driverLicenseImg" :src="form.driverLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">驾驶证</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="vehicleLicenseImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'vehicleLicense') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.vehicleLicenseImg" :src="form.vehicleLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">行驶证</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="identificationImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'identification') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.identificationImg" :src="form.identificationImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证正面照</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="identificationBackImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'identificationBack') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.identificationBackImg"
                    :src="form.identificationBackImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">身份证背面照</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="driverImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'driver') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.driverImg" :src="form.driverImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">司机照片</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="workLicenseImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'workLicense') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.workLicenseImg" :src="form.workLicenseImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">从业资格证</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="roadTransportCertificateImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'roadTransportCertificate') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.roadTransportCertificateImg"
                    :src="form.roadTransportCertificateImg"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">道路运输许可证</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="vehicleImg">
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateSuccess(res, file, 'vehicle') }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.vehicleImg" :src="form.vehicleImg" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">车辆照片</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button v-if="!parentData.showInfo" type="primary" plain @click="funcSubmit()">提交</el-button>
  </div>
</template>
<script>
import {
  getDriverTeam,
  getDriverInfo,
  updateDriverTeam
} from "@/api/driver.js";
import {
  validatePhone,
  validateIDNumber,
  validateCarNum
} from "@/utils/validate.js";
export default {
  name: "DriverEdit",
  props: {
    parentData: {
      showInfo: false,
      areaOptions: [],
      vehicleTypeAllowList: [],
      vehicleClassificationList: [],
      vehicleLengthList: [],
      vehicleWidthList: [],
      vehicleHighList: [],
      vehicleTonnageList: [],
      locationSourceList: []
    }
  },
  data() {
    return {
      uploadUrl: this.BASE_API_URL + "ntocc-tps-api/fileUpload",
      form: {},
      // 有无挂车
      isHasTrailerOptions: [
        { label: "无", value: 0 },
        { label: "有", value: 1 }
      ],
      // 校验
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          {
            required: true,
            validator(rule, value, callback) {
              validatePhone(value)
                ? callback()
                : callback(new Error("请输入正确的手机号"));
            },
            trigger: "blur"
          }
        ],
        password: [{ required: false, message: "请输入密码", trigger: "blur" }],
        identificationNumber: [
          {
            required: true,
            validator(rule, value, callback) {
              validateIDNumber(value)
                ? callback()
                : callback(new Error("请输入正确的身份证号"));
            },
            trigger: "blur"
          }
        ],
        areaList: [
          { required: true, message: "请选择所在区域", trigger: "change" }
        ],
        vehicleClass: [
          { required: true, message: "请选择准驾车型", trigger: "change" }
        ],
        workLicense: [
          { required: true, message: "请输入从业资格证", trigger: "blur" }
        ],
        workLicenseDueDate: [
          {
            required: true,
            message: "请选择从业资格证到期日期",
            trigger: "change"
          }
        ],
        vehicleLicenseDueDate: [
          { required: true, message: "请选择行驶证到期日期", trigger: "change" }
        ],
        roadTransportCertificateDate: [
          { required: true, message: "请选择运输证到期日期", trigger: "change" }
        ],
        selfRespect: [
          { required: true, message: "请选择车身自重", trigger: "change" }
        ],
        height: [{ required: true, message: "请选择车高", trigger: "change" }],
        width: [{ required: true, message: "请选择车宽", trigger: "change" }],
        length: [{ required: true, message: "请选择车长", trigger: "change" }],
        locationSource: [
          { required: true, message: "请选择定位来源", trigger: "change" }
        ],
        trailerNum: [
          { required: true, message: "请输入挂车车牌号", trigger: "blur" }
        ],
        isHasTrailer: [
          { required: true, message: "请选择有无挂车", trigger: "change" }
        ],
        driverLicenseDueDate: [
          { required: true, message: "请选择驾驶证到期日期", trigger: "change" }
        ],
        workCompany: [
          { required: true, message: "请输入工作单位", trigger: "blur" }
        ],
        driverLicense: [
          { required: true, message: "请输入驾驶证号", trigger: "blur" }
        ],
        owner: [
          { required: true, message: "请输入车主姓名", trigger: "blur" }
        ],
        licenseNumber: [
          {
            required: true,
            validator(rule, value, callback) {
              validateCarNum(value)
                ? callback()
                : callback(new Error("请输入正确的车牌号"));
            },
            trigger: "blur"
          }
        ],
        loadWeight: [
          { required: true, message: "请选择车辆载重", trigger: "change" }
        ],
        totalWeight: [
          { required: true, message: "请选择总重量", trigger: "change" }
        ],
        roadTransportCertificateNumber: [
          { required: true, message: "请输入道路运输证号", trigger: "blur" }
        ],
        vin: [
          { required: true, message: "请输入车辆识别代号", trigger: "blur" }
        ],
        classificationCode: [
          { required: true, message: "请选择车型", trigger: "change" }
        ],
        driverLicenseImg: [
          { required: true, message: "请上传驾驶证照片", trigger: "change" }
        ],
        vehicleLicenseImg: [
          { required: true, message: "请上传行驶证照片", trigger: "change" }
        ],
        identificationImg: [
          { required: true, message: "请上传身份证正面照", trigger: "change" }
        ],
        identificationBackImg: [
          { required: true, message: "请上传身份证背面照", trigger: "change" }
        ],
        driverImg: [
          { required: true, message: "请上传司机照片", trigger: "change" }
        ],
        workLicenseImg: [
          { required: true, message: "请上传从业资格证照片", trigger: "change" }
        ],
        roadTransportCertificateImg: [
          { required: true, message: "请上传道路运输许可证照片", trigger: "change" }
        ],
        vehicleImg: [
          { required: true, message: "请上传车辆照片", trigger: "change" }
        ],
        trailerVehicleLicenseImg: [
          { required: true, message: "请上传挂车行驶证照片", trigger: "change" }
        ],
        trailerRoadTransportCertificateImg: [
          {
            required: true,
            message: "请上传挂车道路运输证照片",
            trigger: "change"
          }
        ],
        trailerVehicleImg: [
          { required: true, message: "请上传挂车照片", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    computedIsHasTrailer() {
      return this.form.isHasTrailer === 1 ? true : false;
    }
  },
  created() {
    const code = this.$route.query.code;
    this.form = {};
    if (code) {
      // 管理员权限
      getDriverTeam(code).then(response => {
        this.form = Object.assign({}, response.data, response.data.vehicleVO);
        this.form.locationSource = this.form.locationSource.toString();
        this.form.code = code;
        this.form.areaList = [
          this.form.provinceCode,
          this.form.cityCode,
          this.form.countyCode
        ];
      });
    } else {
      // 司机权限
      getDriverInfo().then(response => {
        this.form = Object.assign({}, response.data, response.data.vehicleVO);
        this.form.locationSource = this.form.locationSource.toString();
        this.form.areaList = [
          this.form.provinceCode,
          this.form.cityCode,
          this.form.countyCode
        ];
      });
    }
  },
  methods: {
    // 区域切换
    changeAreaList(value) {
      if (value.length > 0) {
        this.form.provinceCode = value[0];
        this.form.cityCode = value[1];
        this.form.countyCode = value[2];
      } else {
        this.form.provinceCode = "";
        this.form.cityCode = "";
        this.form.countyCode = "";
      }
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 修改
          const rLoading = this.openLoading();
          this.form.vehicleDTO = this.form.vehicleVO;
          for (const key in this.form) {
            if (key !== 'vehicleDTO' && key !== 'vehicleVO') {
              console.log('key', key)
              this.form.vehicleDTO[key] = this.form[key]
            }
          }
          setTimeout(()=>{
            updateDriverTeam(this.form).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
            });
          }, 500)
        } else {
          this.$message.error("必选项不能为空!");
        }
      });
    },
    // 上传成功回调
    handleUpdateSuccess(res, file, prefix) {
      this.$message({ message: res.msg, type: "success" });
      this.form[`${prefix}Img`] = res.data;
      this.form.vehicleVO[`${prefix}Img`]= res.data;
    },
    // 上传验证
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/bmp" ||
        file.type === "image/png";
      const isLtnM = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,BMP,PNG 格式!");
      }
      if (!isLtnM) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLtnM;
    }
  }
};
</script>
<style scoped>
.custom-grid {
  display: inline-block;
  font-size: 14px;
  color: #8c939d;
  margin-right: 20px;
}
.avatar-uploader /deep/.el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  box-sizing: border-box;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #c0ccda;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
